<template>
  <div class="container">
    <h3 style="padding: 10px 0px 5px 0;">所有标签</h3>
    <div class="tags">
      <el-tag 
          v-for="(tag, idx) in tags" 
          :key="tag.id"
          size=""
          title="标签"
          :hit = "false"
          :color="colors[idx % colors.length]"
          @click="loadList(tag.id)"
          >
          {{tag.name}}  
          <span class="tag-count" title="篇数">
            {{tag.count}}
          </span>
      </el-tag>
    </div>

    <article-card v-for="item in list" :key="item.id" 
      :imgUrl="`${imgUrl}`"
      :img="item.img"
      @click="to(item)"
    >
      <template slot="title">{{item.title}}</template>
      <template slot="body">
        <div v-html="item?.content?.substring(0, 100)"></div>
      </template>
      <template slot="footer">
        <i class="el-icon el-icon-date" style="padding: 0 5px" title="修改/更新时间" >
          <time class="time">{{
            item.updateTime | dateFormat
          }}</time>
        </i>
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon el-icon-reading" style="padding: 0 5px" title="访问量" >{{item.count}}</i>
        <el-tag size="small" class="category-tag" title="分类">{{ item.categoryName }}</el-tag>
      </template>
    </article-card>

  </div>
</template>

<script>
import ArticleCard from '@/components/front/ArticleCard.vue'
export default {
  components: {
    ArticleCard
  },
  mounted() {
    this.GetTags()
    this.$scrollListener(window, this.handleScroll)
    document.title = '标签-个人博客'
  },
  data() {
    return {
      tags: [],
      list: [],
      queryInfo: {
        id: '',
        pagenum: 1,
        pagesize: 5,
      },
      maxPageSize: 1,
      imgUrl: '/api/download',
      scrollTop: 0,
      colors: [
          '#eccc68',
          '#ff7f50',
          '#ff6b81',
          '#70a1ff',
          '#ff4757',
          '#1e90ff',
          '#3742fa',
      ]
    };
  },
  methods: {
    GetTags() {
      console.log("loading")
      this.$http.get("/front/tag/list").then((res) => {
        if (!res.data.status) {
          return this.$message.error("获取分类失败")
        }

        this.tags = res.data.data
        this.queryInfo.id = this.tags[0].id
        this.GetList()
        
      })
    },
    GetList() {
      this.$http.get("/front/tag/getArticleByTag", { params: this.queryInfo }).then((res) => {
        if (!res.data.status) {
          return this.$message.error("获取文章失败！");
        }
        const data = res.data.data;

        this.list.push(...data.records) ;
        this.maxPageSize = Math.ceil(data.total / this.queryInfo.pagesize)
      });
    },
    loadList(id) {
      if (this.queryInfo.id === id) return
      this.list = []
      this.queryInfo.id = id
      this.queryInfo.pagenum = 1
      this.GetList()
    },
    handleScroll (e) {
      if (e.target !== document)
        return
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement.scrollingElement || e.target.scrollingElement
      // console.log(scrollTop, scrollHeight, clientHeight);
      // console.log(Math.ceil(scrollTop) + Math.ceil(clientHeight) >= scrollHeight);
      if (Math.ceil(scrollTop) + Math.ceil(clientHeight) >= scrollHeight) {
        if (this.queryInfo.pagenum < this.maxPageSize) {
          this.queryInfo.pagenum ++
          this.GetList()
        }
      }
    },
    to(item) {
      console.log(item.id);
      this.$router.push({
        path: `/articleDetail/${item.id}`,
        title: item.title
      });
    },
    
  },
  beforeDestroy () {
    this.$removeScrollListener(window, this.handleScroll)
  },
};
</script>

<style lang="less" scoped>
.tags {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 5rem;
}

.tags > span {
    margin: 5px 5px ;
    color: #fff;
    cursor: pointer;
}
.tag-count {
  border-radius: 50%;
  background: #fff;
  color: #666;
  line-height: 1rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  text-align: center;
}
</style>